---
title: Guidelines
redirect_from:
  - /components/radio/
---

import SupportProgressiveDisclosureSnippet from "snippets/support-progressive-disclosure.mdx";

<ReactExample exampleId="Radio-default" />

## When to use

- To present a few options where only one can be selected.

## When not to use

- When you have many options---use a [select](/components/input/select/).
- When multiple options can be selected---use a [checkbox](/components/input/checkbox/).
- For single on/off settings with an instant response---use a [switch](/components/interaction/switch/).
- You want to group multiple options together into a single basic choice---use a [choice group](/components/input/choicegroup/).

## Component status

<ComponentStatus component="Radio" />

## Content structure

![Label: works best when short; radio controller: indicates the state and can be selected or not; info text: adds more explanation to the label and can contain a link.](fileId:4QJZqvBvRrLu6t9mwObCkA;nodeId:160%3A1219)

## Behavior

<SupportProgressiveDisclosureSnippet />

<GuidelineImages>

<DoImage>

![Two radio buttons, one of which has additional text with a link to more info.](fileId:fannvRpkOJK6uxxT33EKaa;nodeId:79%3A1002)

Present only absolutely necessary information with interactions to offer more.

</DoImage>

<DontImage>

![Two radio buttons, one of which has a very long paragraph of additional text.](fileId:fannvRpkOJK6uxxT33EKaa;nodeId:79%3A1000)

Don't overwhelm users with too much information at once.

</DontImage>

</GuidelineImages>

### Show multiple options, but not too many

Radios force users to choose only one option.
Make sure they're always presented with two or more options.
If you have many options to choose from,
consider using a [select](/components/input/select/)
to decrease the initial cognitive load on users.

## Content

### Use parallel labels

Whether you're offering filters for transport options,
statuses for requests, or types of special meals,
always present options using the same structure.

<GuidelinesSideBySide>

<Do>

- Nonstop, Up to 1 stop, Up to 2 stops
- Resolved, Waiting for response, Postponed
- Vegan, Vegetarian, Pescatarian

</Do>

<Dont>

- Nonstop, 1 stop or fewer, Up to 2 stops
- Resolved, I'm waiting for a response, We're not doing this now
- Vegan, A meal without meat, It can include fish

</Dont>

</GuidelinesSideBySide>
